<template>
  <div class="test-container">
    <iframe :src="url"
            frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  components: {

  },
  data () {
    return {
      url: '',
      urlCopy: '',
      user: {},
      project: {}
    };
  },
  watch: {
    '$store.state.choosedProject': {
      handler (newval) {
        this.project = newval
      },
      deep: true,
      immediate: true
    },
    '$store.state.choosedProjectList': {
      handler (newval) {
        console.log(newval, 'watch')
        if (newval) {
          this.handelProjectId(newval)
        }

      },
      deep: true,
      immediate: true
    },
    '$route': {
      handler (newval) {
        let url = this.$route.fullPath.split('url=')[1]
        url = decodeURIComponent(url)
        this.$nextTick(() => {
          url = this.handleUrl(url)
          let projectList = this.$store.state.choosedProjectList
          // this.url = url
          this.urlCopy = url
          this.handelProjectId(projectList)
        })

      },
      deep: true,
      immediate: true
    }
  },
  props: {

  },
  computed: {

  },
  methods: {
    // 将项目id加到url上
    handelProjectId (projectIds) {
      let ids = []
      let urlCopy = JSON.parse(JSON.stringify(this.urlCopy))
      projectIds.list.map((item) => {
        ids.push(item.project_id)
      })
      this.url = urlCopy + `&projectId=${ids.join(',')}`
    },
    // embagedPage?url=http://c.hibuilding.cn:8282/redirect?path=laowuguanlixitong/建工劳务平台-财务要的人员花名册?created_user_id=${user.user_id}&project_id=${project.project_id}&_b=1
    // 处理url，将所需参数注入
    handleUrl (link = '') {
      let list = link.split('?')
      // 解析url，获得目标网址
      // 根据长度判断，list长度为3的是低代码平台链接，为2的是普通网址链接
      let host = ''
      if (list.length === 3) {
        host = list[0] + '?' + list[1]
      } else {
        host = list[0]
      }
      // 获取携带的参数
      let params = list[2] ? list[2].split('&') : list[1].split('&')
      // 处理后的数组
      let res = []
      console.log(list, params, 'handle')
      params.map((item) => {
        // 遍历参数列表，解析出key和要携带的值
        let key = item.split('=')[0]
        let value = item.split('=')[1]
        // 判断是否是动态注入参数还是普通参数  
        let reg = /^\$\{.*\}$/
        let str = ''
        if (reg.test(value)) {
          // 因为分割出的值是类似{user.short_key}格式的，需要把前后的大括号去掉
          let valueLen = value.length
          // 最后得到user.short_key这样的格式，表示全局有一个user对象，取其中short_key的值
          value = value.substr(2, valueLen - 3)
          let targetObj = value.split('.')[0]
          let targetObjKey = value.split('.')[1]
          console.log(targetObj, targetObjKey, this[targetObj], '988888')
          if (this[targetObj]) {
            str = key + '=' + this[targetObj][targetObjKey]
          } else {
            str = key + '=' + ''
          }
        } else {
          str = key + '=' + value
        }
        res.push(str)
      })
      let newLink = host + '?' + res.join('&')
      return newLink
    },
  },
  created () {
    let userInfo = window.localStorage.getItem('userInfo') || '{}'
    this.user = JSON.parse(userInfo)
    // this.url = this.$route.query.url    
  },
  mounted () {

  },
};
</script>

<style scoped lang="scss">
.test-container {
  width: 100%;
  height: 100%;
}
iframe {
  width: 100%;
  height: 100%;
}
</style>
